<template>
  <div id="page_import">
    <form action="/apiInitial" method="post">
      <input type="hidden" name="import_type" value="page" />
      <input type="hidden" name="account" :value="$store.state.userName" >
      <input type="hidden" name="grade" :value="$store.state.grade" />
      <input type="hidden" name="token" :value="$store.state.token">
    <table>
      <tr class="tab_first_line">
        <td>数据源类型</td>
        <td>
          <input @click="enableExcel" type="radio" id="excel_mode" name="mode" value="file" />
          服务器本地的csv或excel文件
          <br>
          <input @click="enableSql" type="radio" id="sql_mode" name="mode" value="sql" />
          服务器sql数据库中的表
        </td>
      </tr>
      <tr v-if="excel">
        <td>文件名(csv或xlsx格式)</td>
        <td>
          <input type="text" name="filename" />
        </td>
      </tr>
      <tr v-if="sql">
        <td>数据源的database名称</td>
        <td>
          <input type="text" name="database" />
        </td>
      </tr>
      <tr v-if="sql">
        <td>数据源的table名称</td>
        <td> <input type="text" name="table" /> </td>
      </tr>
      <input type="submit" value="导入数据" />
    </table>
    </form>
  </div>
</template>
<script >
export default {
  name:'Edit',
  data() {
    return {
      // info : this.$route.query.res
      excel: false,
      sql: false
    }
  },
  methods: {
    enableExcel(){
      this.excel = true;
      this.sql = false;
    },
    enableSql(){
      this.sql = true;
      this.excel = false;
    }
  },
}
</script>
<style scoped>
table{
  width: 60%;
  height: auto;
  margin: auto;
  overflow: auto;
}
table td{
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px black dashed;
  border-right: 1px black dashed;
}
.tab_first_line>td{
  border-top: 1px black dashed;
}
table td:last-child{
  border-right:0;
}
</style>
